<!--
 * @Descripttion: 银行卡页面
 * @Author: maybe
 * @Date: 2019-07-06 15:20:11
 -->

<template>
    <div class="bank">
        <div class="content">
            <ul>
                <li v-show="cardList.length"  v-for="(item,index) in cardList" :key="index">
                    <div class="card-blue hand card-list" @click="goDetail(item.bankcardRecId)">
                        <div>
                            <el-button class="font-blue">建设银行</el-button>
                            <span class="pull-right crad-type">储蓄卡</span>
                        </div>
                        <p>{{item.cardNum.substring(0,4)}}&#x3000;&#x3000;****&#x3000;&#x3000;****&#x3000;&#x3000;{{item.cardNum.substr(item.cardNum.length-4,4)}}</p>
                    </div>
                </li>
               
                <li>
                    <router-link :to="{path:'bankAdd'}" tag="div" class="card-list hand add-bank">
                         <span class="font-size-14"><i class="el-icon-plus"></i> 添加银行卡</span>
                    </router-link>
                </li>
            </ul>
        </div> 
    </div>
</template>

<script>
import {getBankCard} from '@/ajax/index'
import {mapState} from 'vuex'
export default {
    name:'Bank',
    data(){
        return{
            cardList:[]
        }
    },
    mounted(){
        this.getCard()
    },
    methods:{
       goDetail(value){
           this.$router.push({path:'bankDetail',query:{cardId:value}});
       },
       async getCard(){
            const param = {
                'customerId':this.$store.state.userId,
            }
            const result = await getBankCard(param)
            if(result.code === '200' && result.data.state === '1'){ 
                this.cardList = result.data.data
                this.$store.commit('addBankLsit',result.data.data); 
            }else{
                this.$alert(result.data.message,'富易');
            }
       }
    }
}
</script>

<style lang="less" scoped>
.bank{
    margin-top: 150px;
   
    ul li{list-style: none;padding: 10px;width: 50%;height: 150px; float: left;box-sizing: border-box;
    .card-list{padding: 20px 10px;box-sizing: border-box; height: 100%;border-radius: 4px;}
    .card-red{background: url('./../img/card-bg-red.png') no-repeat;background-size: 100%;}
    .card-blue{background: url('./../img/card-bg-blue.png') no-repeat;background-size: 100%;}
    .el-button{background-color: rgba(255, 255,255,0.68);border: none;outline: none;}
    .font-blue{color: #2982D1;}
    .font-red{color: #E94343;}
    p{margin-top: 30px;font-size: 16px;letter-spacing:2px; text-align: center}
    .crad-type{font-size: 14px;margin-top: 8px;}
    .add-bank{ border: 1px solid #4ec2e3;text-align: center;line-height: 86px;color: #4ec2e3;}
   }
}

</style>


